<% layout('/layouts/default.html', {title: '', libs: ['dataGrid']}){ %>
<!-- <link rel="stylesheet" href="${ctxStatic}/modules/sys/sysDesktop.css?${_version}"> -->
<style>
    *{
        margin:0px;
        padding:0px
    }
    p{
        margin:0px
    }
    .kanHeader p {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 700;
        color: #231815;
    }
    .workKey {
        border-radius: 4px;
        margin: 0 0 15px 0;
        text-align: center;
        background: #fff;
        -webkit-transition: -webkit-transform .3s;
        transition: -webkit-transform .3s;
        transition: transform .3s;
        transition: transform .3s,-webkit-transform .3s;
        padding: 0 24px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-bottom: 15px;
        position: relative;
    }
    .shipTop {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 54px;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
    }
    .shipTop h1 {
        font-size: 16px;
        font-weight: 500;
        margin:0px
    }
    .huls span {
        padding-left: 10px;
        font-size: 14px;
        cursor: pointer;
    }
    .huizong p{
        border-radius: 4px;
        text-align: center;
        height: 110px;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        margin-right: 35px;
        cursor: pointer;
    }
    .huizong p span{
        display: block;
        color: #fff;
        font-size: 18px;
        padding-top: 20px;
    }
    .huizong p:last-child {
        margin-right: 0;
    }
    .sheachBao span {
        display: inline-block;
        margin-right: 10px;
        border-radius: 4px;
        font-size: 12px;
        color: #fff;
        padding: 0 5px;
        cursor: pointer;
        line-height: 24px;
    }
    .rightData .dataList span {
        padding-left: 10px;
        font-size: 14px;
        cursor: pointer;
    }
    .shipdivt li{
        display: inline-block;
        height: 32px;
        padding: 0 10px;
        line-height: 30px;
        font-size: 12px;
        color: #409eff;
        border: 1px solid #d9ecff;
        border-radius: 4px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 58px;
        cursor: pointer;
        text-align: center;
        margin-right:10px;
        margin-bottom: 8px;
    }
</style>
    <div class="workKey" style="margin-bottom: 0px;display: block" id="roll1_top2">
        <div class="shipTop">
            <h5>编印日期:${date}</h5>
            <h1>主要经济指标全省排名</h1>
            <p style="cursor: pointer; color: #4b87ff" onclick="more()" >更多</p>
        </div>
        <div class="box-echarts">
            <div style="height: 350px; width: 100%" id="myChart"></div>
        </div>

    </div>

    <div class="row">

        <section class="col-md-5 ui-sortable ui-sortable">

        </section>
    </div>
</div>

<% } %>
<script src="${ctxStatic}/jquery/jquery-ui-sortable-1.12.1.min.js"></script>
<script src="${ctxStatic}/echarts/4.2/echarts.min.js"></script>
<script>
    var  myChart1;
    //打开经济指标排名更多
    function more() {
        js.addTabPage(null, "经济指标详情","${ctx}/home/provinceMajor/list" , true);
    }
    $(function (){
            $.ajax({
                url: "${ctx}/home/provinceMajor/getRank",
                type: "post",
                cache: false,
                data: {},
                dataType: "json",
                success: function(res){
                    myChart1 = echarts.init(document.getElementById('myChart'));
                    myChart1.setOption({
                        tooltip : {
                            trigger: 'axis',
                            //柱形图tooltip内容优化代码
                            formatter: function (datas) {
                                var resName = datas[0].name + "<br/>";
                                for (var i = 0, length = datas.length; i < length; i++) {
                                    //res.xAxisData是接口返回数据
                                    // var index = res.xAxisData.findIndex(function (item) {
                                    //     return item === datas[i].name
                                    // }
                                    // );
                                    var index = 0;
                                    for(var j = 0, length2 = res.xAxisData.length; j < length2; j++){
                                        if(res.xAxisData[j] === datas[i].name){
                                            index = j;
                                        }
                                    }
                                    var listp = res.tooltipData[index];
                                }
                                resName = resName + "省内排名：" + listp;
                                return resName;
                            },
                        },
                        color: ["#5087EC"],
                        toolbox: {
                            show: false,
                        },
                        grid : {
                            top: "3%",
                            left: "0%",
                            right: "4%",
                            bottom: "15px",
                            containLabel: true,
                        },
                        xAxis : [
                            {
                                type : 'category',
                                axisLabel: {
                                    //坐标轴刻度标签的相关设置。
                                    interval: 0,
                                    rotate: "45",
                                },
                                data : res.xAxisData
                            }
                        ],
                        yAxis : [
                            {
                                type: "value",
                                show: true,
                                axisLabel: {
                                    show: true,
                                    textStyle: {
                                        color: "#fff",
                                    },
                                },
                            }
                        ],

                        series : [
                            {
                                type: "bar",
                                data:res.seriesData
                            },

                        ]
                    });
                    window.addEventListener('resize',function () {//执行
                        myChart1.resize();
                    })
                }
            });
    });

</script>